<template>
    <div class="home">
        <!-- 头部 -->
        <div class="control">
            <Input label="" :value.sync="searchKey"/>
            <Button value="搜索" @click="searchArticle" style="marginLeft:1em"/>
            <Button value="添加" @click="createArticle" style="marginLeft:1em" v-if="grade==1"/>  
        </div>
        <hr>

        <!-- 文章展示 -->
        <ArticleData @update-article="updateArticle"/>
        <div class="flex_center" v-if="searchArticleData.length==0">
            暂无文章
        </div>

        <!-- 新增与编辑弹框 -->
        <Dialog v-if="dialogVisible" @close="dialogVisible=false" :type="dialogType"/>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Input from '../../components/FormItem.vue'
import Button from '../../components/Button.vue'
import ArticleData from './articleData.vue'
import Dialog from './dialog.vue'
export default{
    components:{
        Input,
        Button,
        ArticleData,
        Dialog
    },
    data(){
        return{
            searchKey:'',//搜索关键词
            dialogVisible:false,//弹框
            dialogType:'new',//弹框类别
        }
    },
    computed: {
        ...mapGetters([
            'searchArticleData',
            'grade'
        ])
    },
    methods:{
        // 搜索文章
        searchArticle(){
            this.$store.commit('searchArticle',this.searchKey)
        },

        // 新建文章
        createArticle(){
            this.$store.commit('setSelectedId','')
            this.dialogType='new'
            this.dialogVisible=true
        },

        // 编辑文章
        updateArticle(id){
            this.$store.commit('setSelectedId',id)
            this.dialogType='edit'
            this.dialogVisible=true
        }
    }

}
</script>
<style scoped lang="less">
.home{
    width: 68%;
    margin: 1em auto;
    .control{
        display: flex;
        justify-content: start;
        align-items: start;
        margin-bottom: 1em;
    }
}

</style>

